import { create } from 'zustand'
import { createSelectorFunctions } from 'auto-zustand-selectors-hook'
import { immer } from 'zustand/middleware/immer'
import { devtools, persist } from 'zustand/middleware'

export const useCatStore = createSelectorFunctions(
  create(
    immer(
      devtools(
        persist(
          (set, get) => ({
            total: 0,
            cats: {
              bigCats: 0,
              smallCats: 0
            },
            increaseBigCats: () =>
              set(state => {
                state.cats.bigCats = state.cats.bigCats + 2
              }),

            increaseSmallCats: () =>
              set(state => {
                state.cats.smallCats = state.cats.smallCats + 2
              }),

            summary: () => {
              set(state => {
                state.total = get().cats.bigCats + get().cats.smallCats
              })
            },

            resetStorage: () => {
              set(state => {
                state.total = 0
                state.cats.bigCats = 0
                state.cats.smallCats = 0
              })

              localStorage.clear()
            }
          }),
          {
            name: 'CatStore persist'
            // getStorage: () => localStorage,
            // partialize: state => ({
            //   total: state.total,
            //   cats: state.cats
            // })
          }
        ),
        {
          name: 'CatStore devtools'
        }
      )
    )
  )
)
